<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no" />
    <meta content="email=no" name="format-detection" />
    <script src="build/flexible.js"></script>
    <script src="build/flexible_css.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="js/swiper/swiper.css">
    <link rel="stylesheet" href="js/mobiscroll/mobiscroll.custom-2.17.0.min.css">
    <title>首页</title>
</head>
<body>

<header>
    <div class="header-tit box box-between box-center">
        <div class="change-city box box-left box-center item-fix font14">
            <div class="change-city-word item-fix">
                <label>
                    <select class="select">
                        <option value="1">成都市</option>
                        <option value="2">北京市</option>
                        <option value="3">呼和浩特</option>
                    </select>
                </label>
            </div>
            <div class="icons-arrow-down item-fix"></div>
        </div>
        <div class="search item box box-left box-center">
            <div class="icon-search item-fix"></div>
            <div class="search-inp item"><input type="text" placeholder="搜索"></div>
        </div>
        <div class="message item-fix">
            <a href="" class="box box-col box-center font12">
                <span class="icon-message"></span>
                <span class="message-word">消息</span>
                <span class="message-num">2</span>
            </a>
        </div>
    </div>
</header>

<section class="section-nav section-tit">

    <!--轮播广告-->
    <div class="swiper-container banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href=""><img src="img/banner.jpg"></a>
            </div>
            <div class="swiper-slide">
                <a href=""><img src="img/banner.jpg"></a>
            </div>
            <div class="swiper-slide">
                <a href=""><img src="img/banner.jpg"></a>
            </div>
            <div class="swiper-slide">
                <a href=""><img src="img/banner.jpg"></a>
            </div>
            <div class="swiper-slide">
                <a href=""><img src="img/banner.jpg"></a>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <!--图形菜单-->
    <div class="menu-box">
        <ul class="menu clear">
            <li>
                <a href="" class="box box-col box-center">
                    <span class="menu-icons"><img src="img/menu_football.png" alt=""></span>
                    <span class="menu-word font12">足球</span>
                </a>
            </li>
            <li>
                <a href="" class="box box-col box-center">
                    <span class="menu-icons"><img src="img/menu_badminton.png" alt=""></span>
                    <span class="menu-word font12">羽毛球</span>
                </a>
            </li>
            <li>
                <a href="" class="box box-col box-center">
                    <span class="menu-icons"><img src="img/menu_basketball.png" alt=""></span>
                    <span class="menu-word font12">篮球</span>
                </a>
            </li>
            <li>
                <a href="" class="box box-col box-center">
                    <span class="menu-icons"><img src="img/menu_volleyball.png" alt=""></span>
                    <span class="menu-word font12">排球</span>
                </a>
            </li>
            <li>
                <a href="" class="box box-col box-center">
                    <span class="menu-icons"><img src="img/menu_tennis.png" alt=""></span>
                    <span class="menu-word font12">网球</span>
                </a>
            </li>
            <li>
                <a href="" class="box box-col box-center">
                    <span class="menu-icons"><img src="img/menu_table.png" alt=""></span>
                    <span class="menu-word font12">乒乓球</span>
                </a>
            </li>
            <li>
                <a href="" class="box box-col box-center">
                    <span class="menu-icons"><img src="img/menu_running.png" alt=""></span>
                    <span class="menu-word font12">跑步</span>
                </a>
            </li>
            <li>
                <a href="" class="box box-col box-center">
                    <span class="menu-icons"><img src="img/menu_bicycle.png" alt=""></span>
                    <span class="menu-word font12">自行车</span>
                </a>
            </li>
            <li>
                <a href="" class="box box-col box-center">
                    <span class="menu-icons"><img src="img/menu_house.png" alt=""></span>
                    <span class="menu-word font12">马术</span>
                </a>
            </li>
            <li>
                <a href="" class="box box-col box-center">
                    <span class="menu-icons"><img src="img/menu_go.png" alt=""></span>
                    <span class="menu-word font12">围棋</span>
                </a>
            </li>
        </ul>

        <!--公告详情-->
        <div class="notice box box-left box-center">
            <div class="notice-tit item-fix font16 box box-col box-center">
                <p class="notice-red">公告</p>
                <p class="notice-black">详情</p>
            </div>
            <div class="notice-inf item box box-left box-center">
                <div class="icon-notice item-fix"></div>
                <div class="notice-message item font12">
                    <a href="">最近都在比赛，偶然关注到一款运动比赛，于是难道去了一个美丽的地方去了最近都在比赛，偶然关注到一款运动比赛，于是难道去了一个美丽的地方去了最近都在比赛，偶然关注到一款运动比赛，于是难道去了一个美丽的地方去了</a>
                </div>
            </div>
        </div>
    </div>

    <!--滑动门切换-->
    <div class="tabs box font14 margin-square">
        <a href="#" class="active">比赛推荐</a>
        <a href="#">活动详情</a>
    </div>

    <div class="swiper-container tabs-con">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="content-slide">
                    <!--比赛推荐-->
                    <ul class="list">
                        <li class="box box-left box-center">
                            <div class="list-img item-fix">
                                <a href="game/gameDetail.html"><img src="img/list_img.jpg" alt=""></a>
                                <div class="list-img-tip"></div>
                            </div>
                            <div class="list-inf item">
                                <h3 class="list-tit">
                                    <a href="game/gameDetail.html">中国羽毛球协会业余积分系列赛“高神-GOSEN”全国青少年羽毛球赛全国青少年羽毛球赛全国青少年羽毛球赛</a>
                                </h3>
                                <div class="list-con box box-between box-bottom font12">
                                    <div class="list-con-word">2016-04-22至2016-04-28</div>
                                    <div class="list-btn list-btn-yellow">正在报名</div>
                                </div>
                            </div>
                        </li>
                        <li class="box box-left box-center">
                            <div class="list-img item-fix">
                                <a href=""><img src="img/banner.jpg" alt=""></a>
                            </div>
                            <div class="list-inf item">
                                <h3 class="list-tit">
                                    <a href="">中国羽毛球协会业余积分系列赛“高神-GOSEN”全国青少年羽毛球赛</a>
                                </h3>
                                <div class="list-con box box-between box-bottom font12">
                                    <div class="list-con-word">2016-04-22至2016-04-28</div>
                                    <div class="list-btn list-btn-red">比赛中</div>
                                </div>
                            </div>
                        </li>
                        <li class="box box-left box-center">
                            <div class="list-img item-fix">
                                <a href=""><img src="img/list_img.jpg" alt=""></a>
                            </div>
                            <div class="list-inf item">
                                <h3 class="list-tit">
                                    <a href="">中国羽毛球协会业余积分系列赛“高神-GOSEN”全国青少年羽毛球赛</a>
                                </h3>
                                <div class="list-con box box-between box-bottom font12">
                                    <div class="list-con-word">2016-04-22至2016-04-28</div>
                                    <div class="list-btn list-btn-grey">比赛结束</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="content-slide">
                    <!--活动详情-->
                    <ul class="list">
                        <li class="box box-left box-center">
                            <div class="list-img item-fix">
                                <a href=""><img src="img/list_img.jpg" alt=""></a>
                            </div>
                            <div class="list-inf item">
                                <h3 class="list-tit">
                                    <a href="">中国羽毛球协会业余积分系列赛“高神-GOSEN”全国青少年羽毛球赛</a>
                                </h3>
                                <div class="list-con box box-between box-bottom font12">
                                    <div class="list-con-word">2016-04-22至2016-04-28</div>
                                    <div class="list-btn list-btn-yellow">正在报名</div>
                                </div>
                            </div>
                        </li>
                        <li class="box box-left box-center">
                            <div class="list-img item-fix">
                                <a href=""><img src="img/banner.jpg" alt=""></a>
                            </div>
                            <div class="list-inf item">
                                <h3 class="list-tit">
                                    <a href="">中国羽毛球协会业余积分系列赛“高神-GOSEN”全国青少年羽毛球赛</a>
                                </h3>
                                <div class="list-con box box-between box-bottom font12">
                                    <div class="list-con-word">2016-04-22至2016-04-28</div>
                                    <div class="list-btn list-btn-red">比赛中</div>
                                </div>
                            </div>
                        </li>
                        <li class="box box-left box-center">
                            <div class="list-img item-fix">
                                <a href=""><img src="img/list_img.jpg" alt=""></a>
                            </div>
                            <div class="list-inf item">
                                <h3 class="list-tit">
                                    <a href="">中国羽毛球协会业余积分系列赛“高神-GOSEN”全国青少年羽毛球赛</a>
                                </h3>
                                <div class="list-con box box-between box-bottom font12">
                                    <div class="list-con-word">2016-04-22至2016-04-28</div>
                                    <div class="list-btn list-btn-grey">比赛结束</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</section>

<!--底部导航-->
<footer>
</footer>
</body>
<script src="js/jquery.js"></script>
<script src="js/swiper/swiper.js"></script>
<script src="js/autosize/autosize.js"></script>
<script src="js/mobiscroll/mobiscroll.custom-2.17.0.min.js"></script>
<script src="js/dotdotdot/dotdotdot.js"></script>
<script src="js/each/common.js"></script>
<script src="js/each/index.js"></script>
</html>